<template>
  <div
    v-if="profile"
    class="layout-side-sys-tool"
    @mouseover="handleMOverTool"
    @mouseleave="handleMLeaveTool()"
  >
    <el-avatar :size="28" :icon="UserFilled"></el-avatar>
    <div
      style="
        max-width: 50%;
        overflow: hidden;
        word-wrap: normal;
        text-overflow: ellipsis;
      "
    >
      {{ profile.username }}
    </div>
  </div>

  <transition name="el-fade-in">
    <div
      class="dialog-system-menu"
      v-show="dialogOpts.visible"
      @mouseover="handleMOverTool"
      @mouseleave="handleMLeaveTool(200)"
    >
      <div v-if="profile" class="account-avatar">
        <el-avatar :size="48" :icon="UserFilled"></el-avatar>
        <div style="width: 0; flex: 1">
          <div class="account-name">
            {{ profile.username }}
          </div>
          <PipeTags type="role" :state="profile.role.name" size="small" />
        </div>
      </div>
      <el-divider style="margin: 0; border-color: rgba(0, 0, 0, 0.06)" />
      <el-button
        class="menu-btn"
        :icon="User"
        text
        @click="handleClickNavTo('/personal')"
        >个人中心</el-button
      >
      <el-button
        class="menu-btn"
        :icon="Lock"
        text
        @click="handleClickNavTo('/personal')"
        >修改密码</el-button
      >
      <el-divider style="margin: 0; border-color: rgba(0, 0, 0, 0.06)" />
      <el-button
        class="menu-btn"
        :icon="SwitchButton"
        text
        type="danger"
        @click="handleClickLogout"
        >退出登录</el-button
      >
    </div>
  </transition>
</template>

<script setup lang="ts">
import { UserFilled, User, Lock, SwitchButton } from '@element-plus/icons-vue';
import { onUnmounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { storeToRefs } from 'pinia';
import { InitDrawerOpts } from '@/utils/common';

const router = useRouter();
const authStore = useAuthStore();
const { token, profile, routes } = storeToRefs(authStore);

// 弹窗
const dialogOpts = reactive(InitDrawerOpts());

// 计时器
let timer: NodeJS.Timeout;

// 弹出
const handleMOverTool = () => {
  clearTimeout(timer);
  dialogOpts.visible = true;
};

// 隐藏
const handleMLeaveTool = (ms: number = 400) => {
  timer = setTimeout(() => {
    dialogOpts.visible = false;
  }, ms);
};

// 跳转
const handleClickNavTo = (path: string) => {
  dialogOpts.visible = false;
  router.push({ path });
};

// 退出登录
const handleClickLogout = () => {
  dialogOpts.visible = false;
  // 清除token
  token.value = undefined;
  // 清除info
  profile.value = undefined;
  // 清除路由
  routes.value = undefined;
  // 跳转登录
  router.push({ path: '/login' });
};

onUnmounted(() => {
  dialogOpts.visible = false;
});
</script>

<style lang="scss" scoped>
.layout-side-sys-tool {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 56px;
  background-color: #f7f7f7;
  cursor: pointer;
  position: absolute;
  bottom: 0;

  .el-avatar {
    margin-right: 8px;
  }
}

.dialog-system-menu {
  width: 240px;
  height: auto;

  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-border-radius-base);
  border: 1px solid var(--el-border-color-light);
  background-color: var(--el-fill-color-blank);
  background-image: url('@/assets/img/system-tool-bg.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;

  position: fixed;
  left: calc(var(--main-space) + 200px + 8px);
  bottom: var(--main-space);
  z-index: var(--el-index-popper);

  .account-avatar {
    display: flex;
    align-items: center;
    margin: var(--main-space);

    .account-name {
      font-size: var(--el-font-size-large);
      margin-bottom: 4px;

      overflow: hidden;
      word-wrap: normal;
      text-overflow: ellipsis;
    }

    .el-avatar {
      margin-right: 10px;
    }
  }

  .menu-btn {
    display: flex;
    justify-content: flex-start;
    margin: var(--main-space);
  }
}
</style>
